<template>
  <div style="width: 100%; box-sizing: border-box">
    <div style="border: solid 10px red; padding: 20px">
      <h1>父子组件通讯例子</h1>
      <span
        >Vue3的*.vue页面中不存在this，无法通过this.$emit自定义事件，但是提供了defineEmits。还提供了defineProps定义组件属性</span
      >
      <PropsExample />
    </div>

    <div style="border: solid 10px blue; padding: 20px">
      <h1>全局事件总线</h1>
      <span
        >由于vue3中没有了vue构造函数（new
        Vue(xxx)）,也就不存了全局的vm对象。vue3响应实现全局事件总线就得借助npm插件"mitt"</span
      >
      <span> `pnpm i mitt` </span>
      <EventBusExample />
    </div>

    <div style="border: solid 10px green; padding: 20px">
      <h1>v-model自定义组件内部数据与外部数据同步</h1>
      <span
        >例如：弹窗组件，外部传入visible属性，组件内部点击叉子关闭弹窗，我们不能仅仅定义关闭事件抛出，由使用组件的用户在外部赋值visible。而是应该内聚，直接关闭这时就可以使用v-model，他提供了一个内部操作外部数据的契机</span
      >
      <span>(这一点，类似于vue2的sync修饰符)</span>

      <VModelExample />
    </div>

    <div style="border: solid 10px rgb(128, 128, 128); padding: 20px">
      <h1>useAttrs</h1>
      <useAttrsExample />
    </div>

    <div style="border: solid 10px orange; padding: 20px">
      <h1>ref与$parent</h1>
      <RefExample />
    </div>

    <div style="border: solid 10px skyblue; padding: 20px">
      <h1>provide与inject</h1>
      <span>可以实现隔辈分传递数据</span>
      <provideAndInjectExample/>
    </div>
  </div>
</template>

<script setup lang="ts">
import PropsExample from '@/components/PropsExample/ParentComponent.vue'
import EventBusExample from '@/components/EventBus/parentEventBus.vue'
import VModelExample from '@/components/VModel/ModelParent.vue'
import useAttrsExample from '@/components/UseAttrsExample/ParentComponent.vue'
import RefExample from '@/components/RefExample/ParentComponent.vue'
import provideAndInjectExample from '@/components/provideAndinjectExample/ParentComponent.vue'
</script>

<style>
@media (min-width: 1024px) {
  .about {
    min-height: 100vh;
    display: flex;
    align-items: center;
  }
}
</style>
